<template>
  <div class="order-container">
    <!-- 搜索区域 -->
    <div class="card" style="margin-bottom: 5px">
      <el-input
          v-model="keywords"
          prefix-icon="Search"
          style="width: 240px; margin-right: 10px"
          placeholder="请输入订单号查询">
      </el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>

    <!-- 订单列表 -->
    <div class="card" style="margin-bottom: 5px">
      <el-table stripe :data="orderList">
        <el-table-column prop="id" label="订单编号" width="100" />
        <el-table-column prop="team_name" label="团队名称" width="120" />
        <el-table-column prop="team_img" label="团队图片" width="120">
          <template v-slot="scope">
            <el-image
                style="width: 80px; height: 80px; display: block"
                v-if="scope.row.team_img"
                :src="scope.row.team_img"
                :preview-src-list="[scope.row.team_img]"
                preview-teleported>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="team_type_name" label="服务类型" width="120" />
        <el-table-column prop="start_location" label="开始地点" width="150" />
        <el-table-column prop="end_location" label="结束地点" width="150" />
        <el-table-column prop="start_time" label="预约时间" width="180">
          <template v-slot="scope">
            {{dayjs(scope.row.start_time).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="金额" width="100" />
        <el-table-column prop="status" label="订单状态" width="100">
          <template v-slot="scope">
            <div v-if="scope.row.status===0"><el-tag type="success">{{"已支付"}}</el-tag></div>
            <div v-if="scope.row.status===1"><el-tag type="primary">{{"商家已接单"}}</el-tag></div>
            <div v-if="scope.row.status === 2">
              <el-tag type="success">服务已完成</el-tag>
            </div>
            <div v-if="scope.row.status===3"><el-tag type="warning">{{"已取消"}}</el-tag></div>
            <div v-if="scope.row.status===4"><el-tag type="danger">{{"商家拒绝接单"}}</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template v-slot="scope">
            <el-button
                v-if="scope.row.status === 0"
                type="danger"
                plain
                size="small"
                @click="cancelOrder(scope.row)">
              取消订单
            </el-button>
            <el-button v-if="scope.row.status === 2 && scope.row.order_type !== 2"
                       type="primary"
                       plain
                       size="small"
                       @click="openReviewModal(scope.row)">
              评价
            </el-button>

            <el-tag
                v-if="scope.row.status === 2 && scope.row.order_type === 2"
                type="info">
              已评价
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="reviewDialogVisible" title="评价服务" width="500px" :before-close="handleClose">
        <div class="review-content">
          <p>请为我们的服务打分：</p>
          <el-rate v-model="reviewRating"></el-rate>
          <el-input v-model="reviewContent" type="textarea" placeholder="请输入评价内容"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReview">提交评价</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 分页 -->
    <div class="card">
      <el-pagination
          :total="total"
          v-model:current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          @current-change="load"
      />
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {ElDialog, ElRate, ElMessage, ElMessageBox} from 'element-plus'
import {get, post} from '@/net'
import dayjs from 'dayjs'

const reviewContent = ref('');
const keywords = ref('')
const orderList = ref([])
const total = ref(0)
const userId = ref(null)

const reviewDialogVisible = ref(false)
const reviewRating = ref(0)
const currentOrder = ref(null)

const openReviewModal = (order) => {
  console.log(order)
  currentOrder.value = order
  reviewDialogVisible.value = true
}

const submitReview = () => {
  const data = {
    team_id: currentOrder.value.team_id, // 假设订单中包含团队ID
    content: reviewContent.value, // 假设有一个响应式变量存储评价内容
    rating: reviewRating.value,
    user_id: userId.value, // 假设从localStorage获取用户ID
    status: 0,
    like_count: 0
  };

  post('/api/comment/addComment', data, () => {
    ElMessage.success('评论成功');
    reviewDialogVisible.value = false;
    currentOrder.value.is_reviewed = true; // 标记为已评价
    load(); // 重新加载数据，例如订单列表或评论列表
  }, (err) => {
    ElMessage.warning('评论失败');
    console.error(err);
  });
};

const pagination = reactive({
  pageSize: 3,
  currentPage: 1
})

// 加载订单列表
const load = () => {
  // 从localStorage获取用户ID
  userId.value = JSON.parse(localStorage.getItem('user')).id

  get(`/api/order/getOrderListByUser/${pagination.currentPage}?keywords=${keywords.value || ''}&userId=${userId.value}`, (res) => {
    total.value = res.total
    orderList.value = res.list
  }, (err) => {
    ElMessage.warning('获取订单列表失败')
  })
}

// 重置搜索
const reset = () => {
  keywords.value = ''
  load()
}

// 取消订单
const cancelOrder = (order) => {
  ElMessageBox.confirm('确定要取消该订单吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    const updatedOrder = {
      ...order,
      status: 3 // 设置为已取消状态
    }
    post('/api/order/updateOrder', updatedOrder, (res) => {
      ElMessage.success('订单取消成功')
      load()
    }, (err) => {
      ElMessage.error('订单取消失败')
    })
  })
}

onMounted(() => {
  load()
})
</script>

<style scoped>
.order-container {
  padding-top: 25px;
  width: 1300px;
  height: 500px;
  margin: 0 auto;
}
.review-content p {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

/* Element UI 评分组件样式优化 */
.el-rate .el-rate__item {
  margin-right: 8px;
}

/* 弹窗底部按钮样式 */
.dialog-footer {
  text-align: right;
  padding: 10px 20px;
}

.el-dialog {
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 添加阴影 */
}

.el-button {
  margin-left: 10px;
}
.review-content {
  padding: 20px; /* 增加内部边距 */
}

.review-content p {
  margin-bottom: 15px; /* 增加段落与评分组件之间的间距 */
}

.el-rate {
  margin-bottom: 20px; /* 增加评分组件与输入框之间的间距 */
}



.el-input textarea {
  min-height: 100px; /* 增加输入框的高度 */
}

.dialog-footer {
  padding: 10px 20px;
  text-align: right; /* 按钮右对齐 */
}

.el-dialog {
  min-width: 600px; /* 增加弹窗的最小宽度，避免内容挤压 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 阴影 */
}




</style>